<template>
  <div class="w-full flex justify-center overflow-auto">
    <div
      :style="
        isMobile
          ? 'width:100%;min-height:100vh'
          : 'width:375px;min-height:100vh'
      "
      class="content relative"
    >
      <back v-if="!route.meta.search" :isMobile="isMobile" ref="backRef"></back>

      <router-view> </router-view>
      <div class="bottom-0 fixed" v-if="tabbarFlag">
        <tabbar :isMobile="isMobile"></tabbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import back from "@/components/back.vue";
import tabbar from "@/components/tabbar.vue";
import { watchEffect, provide } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@/store/index";
const backRef = ref(null);
const route = useRoute();
const store = useUserStore();
const tabbarFlag = ref(false);
const isMobile = ref(false);

const IsPhone = () => {
  var info = navigator.userAgent;
  //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
  var info = navigator.userAgent;
  //通过正则表达式的test方法判断是否包含“Mobile”字符串
  var isPhone = /mobile/i.test(info);
  return isPhone;
  //如果包含“Mobile”（是手机设备）则返回true
};

watchEffect(() => {
  isMobile.value = IsPhone();
  store.$patch({
    isMobile: isMobile.value,
  });
  tabbarFlag.value = route.meta.tabbar;
});
</script>
<style scoped>
.content {
  background-color: #fbfbfb;
}
</style>
